<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>热点事情排行榜</title>
<style type="text/css">
body{
	text-align:center;
}
table{
	width:600px;
	margin:0 auto;
	border:1px solid black;
}
</style>
</head>
<body>
	<div>
		关键字:<input id="keyword"/> <button onclick="query()">查询</button>
	</div>
	<h1>热门事件排行榜</h1>
	<table>
		<thead>
			<tr>
				<th>关键字</th>
				<th>搜索指数</th>
				<th>创建事件</th>
			</tr>
		</thead>
		<tbody>
		</tbody>
	</table>
	<div>
		<a href="javascript:void(0)" onclick="getFirstPage()">首页</a>
		<a href="javascript:void(0)" onclick="getPrePage()">上一页</a>
		<a href="javascript:void(0)" onclick="getNextPage()">下一页</a>
		<a href="javascript:void(0)" onclick="getLastPage()">末页</a>
		第<span id="pageIndex">x</span>页/共<span id="totalPage">y</span>页
	</div>
</body>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
var pageIndex = 1;//当前页数
var pages = 0;
var keyword = ''

function query(){
	pageIndex = 1
	keyword = $("#keyword").val()
	getPage()
}

function getPage(){
	$.getJSON("hotevents/page",{"pageIndex":pageIndex,"keyword":keyword},function(res){
		if(res.resultCode == 200){
			let events = res.data.records;
			pages = res.data.pages
			//console.log(events)
			$("tbody").empty()
			for(let i in events){
				let event = events[i]
				$("tbody").append(
					`<tr>
						<td><a href="detail.html?hid=${event.id}">${event.keyWord}</a></td>
						<td>${event.searchSum}</td>
						<td>${event.createDate}</td>
					</tr>`)	
			}
			$("#pageIndex").text(pageIndex)
			$("#totalPage").text(pages)
		}
	})
}

function getFirstPage(){
	pageIndex = 1
	getPage()
}

function getLastPage(){
	pageIndex = pages
	getPage()
}

function getPrePage(){
	if(pageIndex == 1){
		return
	}
	pageIndex--
	getPage()
}

function getNextPage(){
	if(pageIndex == pages){
		return
	}
	pageIndex++
	getPage()
}




$(function(){
	getPage()
})
</script>
</html>
